import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import classNames from 'classnames';
import DockBar from '~/components/DockBar';
import HeaderBar from '~/components/HeaderBar';
import ScrollLoading from '~/components/ScrollLoading';
import Loading from '~/components/Loading';
import Modal from '~/components/Modal';
import history from '~/core/history';
import { favoriteCooks, delCard } from '~/api/card';
import s from './CardHolder.scss';


class CardHolder extends Component {

	constructor(props){
		super(props);
		this.state = {
			list: [],
			visible: false,
			dialogData: '',
			cookId: this.props.user.id || null,
			nextpage: 0,
			currentpage: 1,
			edit: false,
			isResult: false,
			favoriteid: null
		};
	}

	componentWillMount() {
		if (this.props.user.id) {
			this.getFavoriteCooks(this.props.user.id, 0, 10);
		}
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.user !== this.props.user) {
			this.setState({
				cookId: nextProps.user.id
			});
			this.getFavoriteCooks(this.state.cookId, 0, 10);
		}
	}

	getFavoriteCooks = (cookId, page, size) => {
		Loading.show();
		favoriteCooks(cookId, page, size).then(res => {
			if (res.length >= 1) {
				for (let i=0; i < res.length; i++) {
					switch (res[i].jobTitle) {
						case '0':
							res[i].jobTitle = '水台';
							break;
						case '1':
							res[i].jobTitle = '配菜';
							break;
						case '2':
							res[i].jobTitle = '打荷';
							break;
						case '3':
							res[i].jobTitle = '砧板';
							break;
						case '4':
							res[i].jobTitle = '上杂';
							break;
						case '5':
							res[i].jobTitle = '油鸡';
							break;
						case '6':
							res[i].jobTitle = '尾锅';
							break;
						case '7':
							res[i].jobTitle = '五锅';
							break;
						case '8':
							res[i].jobTitle = '四锅';
							break;
						case '9':
							res[i].jobTitle = '三锅';
							break;
						case '10':
							res[i].jobTitle = '二锅';
							break;
						case '11':
							res[i].jobTitle = '头锅';
							break;
						case '12':
							res[i].jobTitle = '总厨';
							break;
						case '13':
							res[i].jobTitle = '顾问';
							break;
						case '14':
							res[i].jobTitle = '其他';
							break;
					}
				}
				this.setState({
					list: this.state.list.concat(res),
					nextpage: this.state.nextpage + 1,
					isMaster: res[0].isMaster
				});
			}
			Loading.hide();
		}).catch(err => {
			this.showDialog({
				dialogTitle: '对不起',
				dialogContent: err.message ? err.message : '系统繁忙, 请稍后重试！'
			});
			Loading.hide();
		});
	}

	handleAction = () => new Promise((resolve) => {
		let {cookId, nextpage} = this.state;
		this.getGroupMember(cookId, nextpage, 10);
		resolve();
	});

	handleCloseModal = () => {
		this.setState({ showModal: false });
	}

	handleItem = (id) => () => {
		history.push(`/card?cookId=${id}`);
	}

	showDialog = (dialogData) => {
		this.setState(
			{
				visible: true,
				dialogData
			}
    );
	}

	// 关闭提示弹窗
	handerCloseDialog = () => {
		this.setState({
			visible: false,
			isResult: false
		});
	}

	handleEdit = () => {
		this.setState({edit: true});
	}

	handleEndEdit = () => {
		this.setState({edit: false});
	}

	// 删除名片
	handleDelFavorited = (data) => () => {
		this.setState({
			isResult: true,
			favoriteid: data
		});
	}

	handerConfirm = () => {
		let { cookId, favoriteid } = this.state;
		this.setState({
			isResult: false
		});
		Loading.show();
		delCard(cookId, favoriteid).then((res) => {
			this.setState({
				nextpage: 0,
				list: []
			});
			this.getFavoriteCooks(this.state.cookId, 0, 10);
			Loading.hide();
		}).catch(err => {
			this.showDialog({
				dialogTitle: '对不起',
				dialogContent: err.message ? err.message : '系统繁忙, 请稍后重试！'
			});
			Loading.hide();
		});
	}

	render() {
		const { list } = this.state;
		return (
			<div className={s.root}>
				<HeaderBar
					setTitle="名片夹"
					// goBack
				>
				{
					list.length > 0 ?
					(
						!this.state.edit ?
						<span className={classNames('icon-bj', 'white', s.edite)} onClick={this.handleEdit}/> :
						<span className={classNames('icon-yes', 'white', s.edite)} onClick={this.handleEndEdit}/>
					 ) : null
				}
					
				</HeaderBar>
				<div className={s.listwarp}>
					<ScrollLoading
						handleAction={this.handleAction}
						totalsize={10000}
						currentpage={this.state.currentpage}
						pagesize={10}
						backToTop
						setId={'lalala'}
					>
					{
						list.length > 0 ?
						<ul className={`${s.list} nls`} >
							{
								list.map((item, i) => (
									<li className="clearfix" key={i}>
										<div className="w2-5 fl" onClick={this.handleItem(item.id)}>
											<img src={item.headimgurl?item.headimgurl :require('./face.jpg')} alt=""/>
										</div>
										<div className="w6" onClick={this.handleItem(item.id)}>
											<h3 className="txt_cut font">{item.name}</h3>
											<p className="txt_cut gray font-small">{item.jobTitle}</p>
										</div>
										{!this.state.edit ? <a href={`tel:${item.phone}`} className={s.tel}>
											<span className={classNames('icon-tel')} />
										</a> : null}
										{this.state.edit ? <span onClick={this.handleDelFavorited(item.id)}>
											<i className={classNames('icon-close', s.del)} />
										</span> : null}
									</li>
								))
							}
						</ul> :
						<p className="al-c pdt1">暂无收藏名片~</p>
					}
						
					</ScrollLoading>
				</div>
				<DockBar current={2} />
				<Modal
					contentLabel="Modal"
					isOpen={this.state.visible}
					onRequestClose={this.handleHideCard}
					shouldCloseOnOverlayClick={true}
				>
				<div className="pd1 clearfix">
					<h3 className={`al-c pdt1 orange-dark font-bigger`}>{this.state.dialogData.dialogTitle}</h3>
					<p className="pdt1 pdb2 al-c">{this.state.dialogData.dialogContent}</p>
					<div
						onClick={this.handerCloseDialog}
						className="center w6 al-c btn"
					>确定</div>
				</div>
				</Modal>
				<Modal
					contentLabel="Modal"
					isOpen={this.state.isResult}
					onRequestClose={this.handleHideCard}
					shouldCloseOnOverlayClick={true}
				>
				<div className="pd1 clearfix">
					<h3 className={`al-c pdt1 orange-dark font-bigger`}>温馨提示</h3>
					<p className="pdt1 pdb2 al-c">您确定要删除此名片吗？</p>
					<div
						onClick={this.handerConfirm}
						className="fl w4-8 al-c btn"
					>确定
					</div>
					<div
						onClick={this.handerCloseDialog}
						className="fr w4-8 btnb"
					>取消</div>
				</div>
				</Modal>
			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		user: state.user
	};
}

export default connect(mapStateToProps)(CardHolder);
